import { createStaticNavigation } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Login } from '../pages/login/index';
import { Home } from '../pages/home/index';
import { My } from '../pages/my/index';
import { Text, Pressable, View } from 'react-native';
import { px2dp } from '../utils/pixel-adapter';
import { StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { getTheme } from '../theme';
import { useIsSingin, useIsSignout } from '../hooks/useAuth';

const theme = getTheme();


const styles = StyleSheet.create({
    tabBar: {
        width: '100%',
        height: px2dp(56),
        backgroundColor: theme.mainColor,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        borderTopWidth: 1,
        borderTopColor: 'rgb(39, 39, 42)',
    },
    tabBarItem: {
        flex: 1,
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabBarItemPressed: {
        opacity: 0.8,
        backgroundColor: '#555',
    },
    tabBarItemLabel: {
        fontSize: px2dp(12),
        color: 'rgb(161, 161, 170)',
    },
    tabBarItemIcon: {
        fontSize: px2dp(14),
        color: 'rgb(161, 161, 170)',
        marginBottom: px2dp(5),
    },
    tabBarItemLabelIconActive: {
        color: theme.subcolor,
    },
});



const HomeTabs = createBottomTabNavigator({
    tabBar: (props) => {
        const { state, descriptors } = props;
        function onPress(route) {
            props.navigation.navigate(route.name);
        }

        return (
            <SafeAreaView edges={['bottom']}>
                <View style={styles.tabBar}>
                    {
                        state.routes.map((route, index) => {
                            const desc = descriptors[route.key];
                            const isActive = index === state.index;

                            return (
                                <Pressable onPress={() => onPress(route)} key={index} style={({ pressed }) => {
                                    return [styles.tabBarItem, pressed ? styles.tabBarItemPressed : null];
                                }}>
                                    <Text style={[
                                        styles.tabBarItemIcon, 
                                        { fontFamily: 'iconfont' }, 
                                        isActive &&  styles.tabBarItemLabelIconActive
                                        ]}
                                    >
                                        {desc.options.unicode}
                                    </Text>
                                    <Text style={[styles.tabBarItemLabel, isActive &&  styles.tabBarItemLabelIconActive]}>
                                        {desc.options.title}
                                    </Text>
                                </Pressable>
                            );
                        })
                    }
                </View>
            </SafeAreaView>
        );
    },
    screens: {
        home: {
            screen: Home,
            options: {
                headerShown: false,
                title: '首页',
                unicode: '\ue600',
                headerRight: () => (
                    <Text>headerRight</Text>
                ),
            },
        },
        my: {
            screen: My,
            options: {
                title: '我的',
                unicode: '\ue601',
                headerShown: false,
            },
        },
    },
});


const SignInStack = createNativeStackNavigator({
    screens: {
        homeTabs: {
            screen: HomeTabs,
            options: {
                headerShown: false,
            },
        },
    },
});

const SignOutStack = createNativeStackNavigator({
    screens: {
        login: {
            screen: Login,
            options: {
                headerShown: false,
            },
        },
    },
});

const RootStack = createNativeStackNavigator({
    screenListeners: {
        state(e) {
            console.log('全局路由改变', e);
        }
    },
    screens: {
        LoggedIn: {
            if: useIsSingin,
            screen: SignInStack,
            options: {
                headerShown: false,
            },
        },
        LoggedOut: {
            if: useIsSignout,
            screen: SignOutStack,
            options: {
                headerShown: false,
            },
        },
    },
});
const RootNavigation = createStaticNavigation(RootStack);

export default RootNavigation;